<template>
  <div class="home">

    <div class="homeTab">
      <Header @ToHome="ToHome()"></Header>

      <ly-tab
          v-model=$store.state.selectedId
          :items="items"
          :options="options"
          @change="lyTab">
      </ly-tab>
    </div>
    <div class="container">

      <router-view></router-view>

    </div>

  </div>
</template>

<script>

import Header from "@/components/home/Header";
import {api1} from "@/common/api/request"

export default {
  name: 'Home',
  data () {
    return {
      path:'/home/HomePage',

      items: [
        {label: '首页'},
        {label: 'BEATS SOLO3 WIRELESS'},
        {label: 'Beats Flex'},
        {label: 'PowerBeats'},
        {label: 'PowerBeats Pro'},
        {label: 'Solo Pro'},
        {label: 'BEATS STUDIO3 WIRELESS'},
        {label: 'BEATS EP'},
        {label: 'BEATS PILL+'}
      ],
      options: {
        activeColor: 'red'
        // 可在这里指定labelKey为你数据里文字对应的字段名
      },
      activeUrl:['/home/HomePage','/home/BeatsSolo3','/home/BeatsFlex','/home/PowerBeats',
        '/home/PowerBeatsPro','/home/SoloPro','/home/BeatsStudio3','/home/BeatsEP','/home/BeatsPill']
    }
  },
  components: {
    Header,
  },
  created() {   //这里有BUG！！！！！！！！
    //this.selectedId = this.activeUrl.indexOf(this.$route.path)
    // this.apiInit()

    //解决
    this.$nextTick(()=>{
      this.$store.state.selectedId = this.$store.state.activeUrl.indexOf(this.$route.path)
    })

    window.addEventListener('load',()=>{
      this.$router.replace(this.$store.state.activeUrl[this.$store.state.selectedId])
    })
  },
  // updated() {   //这里有BUG！！！！！！！！
  //   this.$store.state.selectedId = this.$store.state.activeUrl.indexOf(this.$route.path)
  //   this.selectedId = this.$store.state.selectedId
  //   //this.selectedId = this.activeUrl.indexOf(this.$route.path)
  //   // this.apiInit()
  // },
  activated() { //路由活跃时，添加上离开时的路径
    this.$router.push(this.path)
  },
  beforeRouteLeave(to,from,next){ //离开路由组件前
    this.path = this.$route.path  //记录此时路由路径
    next()
  },
  methods: {
    lyTab(item,index){
      this.$router.replace(this.$store.state.activeUrl[index])
    },
    ToHome(){
      this.$router.replace('/home')
      this.$store.state.selectedId = 0
    },


    // apiInit(){
    //   api1({
    //     url: '/api/index_list/0/data/1'
    //   }).then(res => {
    //     this.items = res.topBar
    //
    //     console.log(res)
    //   })
    // },
  }
}
</script>
<style scoped lang="scss">
.homeTab{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
</style>